import React, { useState } from "react";
import { Button, Typography } from "antd";
import {
  UpOutlined,
  DownOutlined,
  LeftOutlined,
  RightOutlined,
} from "@ant-design/icons";
import "./App.scss";
import axios from "axios";

const MyComponent = (props) => {
  const [data, setData] = useState();
  const OnProgress = (val) => {
    console.log("OnProgress -> val", val);
  };
  return (
    <>
      <div className="outermostLayer">
        <div className="video">视频容器</div>
        <div>
          <Typography.Text type="success">
            <Typography.Title type="success" level={3}>
              控制
            </Typography.Title>
          </Typography.Text>
          <div className="container">
            <Button
              type="primary"
              className="up"
              shape="circle"
              icon={<UpOutlined />}
              onTouchStart={() => OnProgress("Up")}
            />
            <Button
              type="primary"
              className="down"
              shape="circle"
              icon={<DownOutlined />}
            />
            <Button
              type="primary"
              className="left"
              shape="circle"
              icon={<LeftOutlined />}
            />
            <Button
              type="primary"
              className="right"
              shape="circle"
              icon={<RightOutlined />}
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default MyComponent;
